<template>
  <div class="contanier">
    <div class="beng">
    </div>
    <div class="ben-info">
      <div class="info-text">
        <div class="info-text-box">
          <div class="title1">大包重1#臂</div>
          <div class="num">0.00
          </div>
          <div class="unit">t</div>
        </div>
        <div class="info-text-box">
          <div class="title1">大包重1#臂</div>
          <div class="num">0.00</div>
          <div class="unit">t</div>
        </div>
        <div class="info-text-box">
          <div class="title1">大包测温</div>
          <div class="num" style="margin-left: 6px;">0.00
          </div>
          <div class="unit" style="font-size: 12px;">℃</div>
        </div>
      </div>
    </div>
    <div class="ben-info1">
      <div class="info1-text-box">
        <div class="title1">1#中包连续测温</div>
        <div class="num">0.00
        </div>
        <div class="unit" style="font-size: 12px;">℃</div>
      </div>
    </div>
    <div class="ben-info2">
      <div class="info1-text-box">
        <div class="title1">2#中包连续测温</div>
        <div class="num">0.00
        </div>
        <div class="unit" style="font-size: 12px;">℃</div>
      </div>
    </div>
    <!-- 白盒字 -->
    <div class="b1 bcenter">
      <div style="font-size: 12px;color: rgba(156, 159, 167, 1);">中间车编号</div>
      <div style="font-size: 22px;font-weight: bold;">{{ imgArr.code }}</div>
    </div>
    <div class="b2 bcenter">
      <div style="font-size: 12px;color: rgba(156, 159, 167, 1);margin-top: 4px;">温度</div>
      <div style="font-size: 22px;font-weight: bold;">{{ imgArr.temp }}℃</div>
    </div>
    <div class="b3 bcenter">
      <div style="font-size: 12px;color: rgba(156, 159, 167, 1);">重量</div>
      <div style="font-size: 22px;font-weight: bold;">{{ imgArr.weight }}t</div>
    </div>
    <!-- 右边 -->
    <div class="rtop1">
      <div class="rtop-title ">主机液压站</div>
      <div style="display: flex;">
        <div class="icon1">
          <div v-for="item in 4" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
            <img class="img" style="width: 20px;height: 28px;" src="../../assets/zhlIcon/p.png" alt="">
            <span style="font-size:11px;">1#压力泵</span>
          </div>
        </div>
        <div class="icon2">
          <div v-for="item in 2" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
            <img class="img" style="width: 13px;height: 19px;" src="../../assets/zhlIcon/p.png" alt="">
            <span style="font-size: 9px;margin-top: 6px;">2#循环泵</span>
          </div>
        </div>
      </div>
      <div class="rtinfo" style="font-size: 11px;">
        <div class="btn">泵停止运行</div>
        <div style="margin-left: 9px;margin-right: 26px;">液位</div>
        <div class="rnum">0.00</div>
        <div style="margin-left: 42px;">mm</div>
      </div>
    </div>
    <div class="rtop2">
      <div class="rtop-title ">出坯液压站</div>
      <div style="display: flex;">
        <div class="icon1">
          <div v-for="item in 4" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
            <img class="img" style="width: 20px;height: 28px;" src="../../assets/zhlIcon/p.png" alt="">
            <span style="font-size: 11px;">1#压力泵</span>
          </div>
        </div>
        <div class="icon2">
          <div v-for="item in 2" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
            <img class="img" style="width: 13px;height: 19px;" src="../../assets/zhlIcon/p.png" alt="">
            <span style="font-size: 9px;margin-top: 6px;">2#循环泵</span>
          </div>
        </div>
      </div>
      <div class="rtinfo" style="font-size: 11px;">
        <div class="btn">泵停止运行</div>
        <div style="margin-left: 9px;margin-right: 26px;">液位</div>
        <div class="rnum">0.00</div>
        <div style="margin-left: 42px;">mm</div>
      </div>
    </div>
    <!-- 右边表格 -->
    <div class="rtable1">
      <span style="font-weight: bold;">结晶器</span>
      <ZTable :rtable1Arr="rtable1Arr"></ZTable>
    </div>
    <div class="rcard">
      <div class="rcardTop">二冷风机</div>
      <div class="rcardInfo">
        <div style="display: flex;align-items: center;justify-content: center;">
          <span style="font-size: 13px;">1#二冷风机</span>
          <img style="width: 53px;height: 51px;margin-left: 10px;" src="../../assets/zhlIcon/fen.png" alt="">
        </div>
        <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
          <div style="width: 59px;height: 12px;font-size: 11px;">操作方式</div>
          <div
            style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
            就地</div>
        </div>
        <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
          <div style="width: 59px;height: 12px;font-size: 11px;">工作状态</div>
          <div
            style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(255, 87, 34, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
            停止</div>
        </div>
      </div>
      <div class="rcardInfo">
        <div style="display: flex;align-items: center;justify-content: center;">
          <span style="font-size: 13px;">2#二冷风机</span>
          <img style="width: 53px;height: 51px;margin-left: 10px;" src="../../assets/zhlIcon/fen.png" alt="">
        </div>
        <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
          <div style="width: 59px;height: 12px;font-size: 11px;">操作方式</div>
          <div
            style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
            就地</div>
        </div>
        <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
          <div style="width: 59px;height: 12px;font-size: 11px;">工作状态</div>
          <div
            style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(255, 87, 34, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
            停止</div>
        </div>
      </div>
    </div>
    <div class="rtable2">
      <span style="font-weight: bold;">二冷流量</span>
      <ZTable :rtable1Arr="rtable1Arr2"></ZTable>
    </div>
    <div class="rcard1">
      <div class="recard1Top">
        <div class="recard1TopItem" v-for="item in recard1TopArr">
          {{ item }}
        </div>
      </div>
      <div class="rcard1BoxInfo">
        <div class="rcard1BoxInfoItem" v-for="item in rcard1BoxInfoArr">
          <div>{{ item.z }}</div>
          <div>{{ item.l }}</div>
          <div>{{ item.y }}</div>
          <div>{{ item.w }}</div>
        </div>
      </div>
    </div>

    <!-- 主炉 -->
    <div class="ltabel1">
      <span style="font-weight: bold;">主炉</span>
      <ZTable :rtable1Arr="ltabel1Arr"></ZTable>
    </div>
    <!-- 底部 -->
    <div style="font-size: 10px;">
      <div class="footer1">
        <div style="display: flex;align-items: center;" v-for="item in 8">
          <span>{{ item }}#流</span>
          <div class="r flex">0.00</div>
          <span>m/min</span>
        </div>
      </div>
      <div class="footer2">
        <div style="display: flex;align-items: center;" v-for="item in 7">
          <span>状态</span>
          <div class="r flex">停机</div>
        </div>
      </div>
      <div class="footer3">
        <div style="display: flex;align-items: center;">
          <div style="width: 75px;text-align: center;">钢种</div>
          <div class="r flex">钢种</div>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="width: 75px;text-align: center;">铸坏断面</div>
          <div class="r flex">钢种</div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import ZTable from './common/ZTable.vue';

import { getMqtt } from '../../api/mqtt';
export default {
  components: {
    ZTable,
  },
  data() {
    return {
      rtable1Arr: [
        ['振频HZ'],
        ['振幅mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['液位%', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['塞棒行程mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水流量m3/m', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水温度℃', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水温差℃', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      rtable1Arr2: [
        ['足辊段m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['一段', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['二段', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['三段', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['二冷气压mpa', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['比水量', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['总流量m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      recard1TopArr: ['总管', '流量', '压力/MPa', '温度/℃'],
      rcard1BoxInfoArr: [
        {
          z: '二冷水进水',
          l: '',
          y: '0.00',
          w: '0.00'
        }, {
          z: '结晶器进水',
          l: '',
          y: '0.00',
          w: '0.00'
        },
        {
          z: '二冷水空气',
          l: '',
          y: '0.00',
          w: '0.00'
        }, {
          z: '净环水总管',
          l: '',
          y: '0.00',
          w: '0.00'
        },
        {
          z: '独环水总管',
          l: '',
          y: '0.00',
          w: '0.00'
        }

      ],
      ltabel1Arr: [
        ['结晶器液位', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇筑时间hh:mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['设定拉速m/min', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['实际拉速m/min', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇铸断面', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇铸长度', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['操作模式', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      imgArr: {}
    }
  },
  mounted() {
    this.getMqtt();
  },
  methods: {
    getMqtt() {
      setInterval(() => {
        getMqtt().then(res => {
          console.log(res);
          this.imgArr = res.data;
        });
      }, 3000);

    }
  }

}
</script>

<style lang="scss" scoped>
.contanier {
  font-size: 12px;
  width: 100%;
  height: 820px;
  opacity: 1;
  border-radius: 6.72px;
  overflow: hidden;

  .beng {
    position: absolute;
    left: 181.5px;
    top: 136.26px;
    width: 294.07px;
    height: 248.28px;
    opacity: 1;
    background: url('../../assets//zhlIcon/b.jpg');
    background-size: cover;
    scale: 1.41;
  }

  .ben-info {
    position: absolute;
    left: 17.84px;
    top: 15.26px;
    width: 203px;
    height: 108.2px;
    opacity: 1;
    box-shadow: 0 0 4px #ccc;
    border-radius: 8px;
    padding: 7px 18px;

    .info-text {
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      height: 90px;

      .info-text-box {
        display: flex;
        justify-content: space-between;

        .title1 {
          width: 86px;
          text-align: center;
        }

        .num {
          width: 47px;
          height: 20px;
          border: 1px solid #000;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: end;

          .unit {}

        }
      }


    }

  }

  .ben-info1,
  .ben-info2 {
    position: absolute;
    left: 254.15px;
    top: 52.42px;
    width: 222.87px;
    height: 15.23px;
    opacity: 1;

    .info1-text-box {
      display: flex;
      align-items: end;
      justify-content: space-between;
      font-size: 13px;
      margin-top: -10px;

      .title {
        width: 99px;
        text-align: center;
      }

      .num {
        width: 55px;
        height: 18px;
        border: 1px solid #000;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: end;

        .unit {}

      }
    }
  }

  .ben-info2 {
    position: absolute;
    top: 27.55px;
    opacity: 1;
  }

  .b1 {
    position: absolute;
    left: 164px;
    top: 285.56px;
    width: 88px;
    height: 49px;
    opacity: 1;
    border-radius: 6px 6px, 6px, 6px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);

  }

  .b2 {
    position: absolute;
    left: 270.27px;
    top: 285.56px;
    width: 88px;
    height: 49px;
    opacity: 1;
    border-radius: 6.17px 6.17px, 6.17px, 6.17px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
  }

  .b3 {
    position: absolute;
    left: 382.14px;
    top: 285.56px;
    width: 88px;
    height: 49px;
    opacity: 1;
    border-radius: 6.17px 6.17px, 6.17px, 6.17px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);

  }

  .bcenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
  }

  .rtop1 {
    position: absolute;
    left: 439.05px;
    top: 11.42px;
    width: 395.48px;
    height: 141.12px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 8px 32px;


  }

  .rtop2 {
    position: absolute;
    left: 837.95px;
    top: 8.74px;
    width: 379.48px;
    height: 141.12px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 8px 32px;

  }

  .rtop-title {
    margin: 0 auto;
    width: 330.98px;
    height: 38px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(30, 159, 255, 1);
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    line-height: 38px;
  }

  .icon1 {
    width: 269.49px;
    height: 71.88px;
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-content: space-between;

  }

  .icon2 {
    width: 102.3px;
    height: 71.88px;
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-content: space-between;
    margin-left: 21px;

  }

  .rtinfo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    .btn {
      width: 78.11px;
      height: 16.48px;
      opacity: 1;
      border-radius: 1.34px;
      background: rgba(255, 87, 34, 1);
      font-size: 12px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        cursor: pointer;
        background: rgb(250, 118, 77);

      }
    }

    .rnum {
      width: 42.11px;
      height: 14.78px;
      opacity: 1;
      border-radius: 1.34px;
      background: rgba(255, 255, 255, 1);
      border: 0.67px solid rgba(79, 79, 79, 1);
      font-size: 9px;
      display: flex;
      justify-content: center;
      align-items: center;

    }

  }

  .rtable1 {
    position: absolute;
    left: 575.05px;
    top: 161.96px;
    width: 472.45px;
    height: 270.38px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 6px 10px;

  }

  .rcard {
    position: absolute;
    left: 1056.15px;
    top: 160.61px;
    width: 160.6px;
    height: 272.38px;

    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 9px;

    .rcardTop {
      margin: 0 auto;
      width: 142.4px;
      height: 23.52px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(30, 159, 255, 1);
      font-size: 12px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .rcardInfo {
      width: 142.48px;
      height: 108.4px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
      margin: 8px 0;
    }

  }

  .rtable2 {
    position: absolute;
    left: 438.69px;
    top: 444.06px;
    width: 409.7px;
    height: 270.37px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 6px 10px;


  }

  .rcard1 {
    position: absolute;
    left: 854.85px;
    top: 443.92px;
    width: 361.01px;
    height: 270.37px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 6px 17px 0 17px;

    .recard1Top {
      width: 327.28px;
      height: 53.09px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(30, 159, 255, 1);
      color: #fff;
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      .recard1TopItem {
        line-height: 53.09px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }

    .rcard1BoxInfo {
      height: 223px;
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .rcard1BoxInfoItem {
        height: 19px;
        display: flex;
        justify-content: space-between;

        &:hover {
          cursor: pointer;
          background: #eee;
        }

        div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }



    }
  }

  .ltabel1 {
    position: absolute;
    left: 14.98px;
    top: 443.97px;
    width: 417.45px;
    height: 270.32px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
  }

  .footer1 {
    font-size: 12px;
    position: absolute;
    left: 14.98px;
    top: 722.36px;
    width: 921.73px;
    height: 25.54px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 0 37px 0 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .r {
      width: 28px;
      height: 20.16px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(240, 240, 240, 1);
      margin: 0 3px;
    }
  }

  .footer2 {
    font-size: 12px;

    position: absolute;
    left: 14.98px;
    top: 749.94px;
    width: 921.73px;
    height: 28.22px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 0 43px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .r {

      width: 59.81px;
      height: 20.16px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(240, 240, 240, 1);
      margin-left: 8px;
    }

  }

  .footer3 {
    font-size: 12px;

    position: absolute;
    left: 943.79px;
    top: 722.06px;
    width: 272.07px;
    height: 55.11px;
    opacity: 1;
    border-radius: 6.72px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
    padding: 11px 33px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;

    .r {
      width: 139.56px;
      height: 16.37px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(240, 240, 240, 1);
      margin-left: 17px;
    }
  }





}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img:hover {
  cursor: pointer;
  scale: 1.3;
  transition: all 0.3s;

}
</style>
